<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{number}}.{{title}} - CodeMaster</title>
    
    <!-- ACE 编辑器 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.15.0/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.15.0/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
    
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary: #2563eb;
            --secondary: #1e40af;
            --accent: #3b82f6;
            --light: #f8fafc;
            --dark: #1e293b;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --gray: #64748b;
            --light-gray: #e2e8f0;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: var(--dark);
        }

        .container {
            max-width: 100%;
            margin: 0 auto;
        }

        /* 导航栏样式 */
        .navbar {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--primary);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .nav-links {
            display: flex;
            gap: 1.5rem;
            align-items: center;
        }

        .nav-links a {
            color: var(--dark);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
            padding: 0.5rem 1rem;
            border-radius: 8px;
        }

        .nav-links a:hover {
            color: var(--primary);
            background: rgba(37, 99, 235, 0.1);
        }

        .nav-links a.active {
            color: var(--primary);
            background: rgba(37, 99, 235, 0.2);
        }

        .login-btn {
            background: var(--primary);
            color: white !important;
            padding: 0.5rem 1.5rem !important;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .login-btn:hover {
            background: var(--secondary) !important;
            transform: translateY(-2px);
        }

        /* 主要内容区域 */
        .coding-area {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0;
            min-height: calc(100vh - 80px);
        }

        /* 题目描述区域 */
        .problem-description {
            background: rgba(255, 255, 255, 0.95);
            padding: 2rem;
            overflow-y: auto;
            height: calc(100vh - 80px);
        }

        .problem-header {
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid var(--light-gray);
        }

        .problem-title {
            font-size: 2rem;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .difficulty-badge {
            padding: 0.3rem 1rem;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.9rem;
        }

        .difficulty-easy {
            background-color: #dcfce7;
            color: #16a34a;
        }

        .difficulty-medium {
            background-color: #ffedd5;
            color: #ea580c;
        }

        .difficulty-hard {
            background-color: #fee2e2;
            color: #dc2626;
        }

        .problem-content {
            line-height: 1.8;
        }

        .problem-content pre {
            background: var(--light);
            padding: 1rem;
            border-radius: 8px;
            overflow-x: auto;
            margin: 1rem 0;
            font-family: 'Consolas', 'Monaco', monospace;
            white-space: pre-wrap;
        }

        .problem-content code {
            background: var(--light);
            padding: 0.2rem 0.4rem;
            border-radius: 4px;
            font-family: 'Consolas', 'Monaco', monospace;
        }

        /* 代码编辑区域 */
        .code-editor {
            background: #2d2d2d;
            position: relative;
            height: calc(100vh - 80px);
        }

        #editor {
            width: 100%;
            height: 70%;
        }

        .editor-toolbar {
            background: #333;
            padding: 1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #444;
        }

        .editor-actions {
            display: flex;
            gap: 1rem;
        }

        .btn {
            padding: 0.5rem 1.5rem;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-primary {
            background: var(--primary);
            color: white;
        }

        .btn-primary:hover {
            background: var(--secondary);
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: var(--gray);
            color: white;
        }

        .btn-secondary:hover {
            background: #475569;
        }

        .language-select {
            padding: 0.5rem;
            border: 1px solid #444;
            border-radius: 6px;
            background: #333;
            color: white;
        }

        /* 结果输出区域 */
        .result-output {
            background: #1e1e1e;
            color: white;
            padding: 1rem;
            height: 30%;
            overflow-y: auto;
            font-family: 'Consolas', 'Monaco', monospace;
        }

        .result-tabs {
            display: flex;
            gap: 1rem;
            margin-bottom: 1rem;
            border-bottom: 1px solid #444;
            padding-bottom: 0.5rem;
        }

        .tab {
            padding: 0.5rem 1rem;
            cursor: pointer;
            border-radius: 4px;
        }

        .tab.active {
            background: var(--primary);
            color: white;
        }

        .output-content {
            white-space: pre-wrap;
            line-height: 1.6;
        }

        .success {
            color: var(--success);
        }

        .error {
            color: var(--danger);
        }

        .warning {
            color: var(--warning);
        }

        .info {
            color: var(--accent);
        }

        /* 响应式设计 */
        @media (max-width: 1024px) {
            .coding-area {
                grid-template-columns: 1fr;
            }
            
            .problem-description,
            .code-editor {
                height: auto;
                min-height: 50vh;
            }
        }

        /* 动画效果 */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .problem-description,
        .code-editor {
            animation: fadeIn 0.5s ease-out;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 导航栏 -->
        <nav class="navbar">
            <div class="nav-container">
                <a href="/" class="logo">
                    <i class="fas fa-code"></i>
                    CodeMaster
                </a>
                <div class="nav-links">
                    <a href="/">首页</a>
                    <a href="/all_questions">题库</a>
                    <a href="#">竞赛</a>
                    <a href="#">讨论</a>
                    <a href="#" class="login-btn">登录</a>
                </div>
            </div>
        </nav>

        <!-- 代码编辑区域 -->
        <div class="coding-area">
            <!-- 题目描述 -->
            <div class="problem-description">
                <div class="problem-header">
                    <div class="problem-title">
                        <span>{{number}}. {{title}}</span>
                        <span class="difficulty-badge difficulty-{{star}}">
                            {{star}}
                        </span>
                    </div>
                </div>
                <div class="problem-content">
                    <pre>{{desc}}</pre>
                </div>
            </div>

            <!-- 代码编辑器 -->
            <div class="code-editor">
                <div class="editor-toolbar">
                    <div class="editor-actions">
                        <select class="language-select" id="languageSelect">
                            <option value="c_cpp">C++</option>
                            <option value="c_cpp">C</option>
                            <option value="python">Python</option>
                            <option value="java">Java</option>
                            <option value="javascript">JavaScript</option>
                        </select>
                        <button class="btn btn-secondary" onclick="resetCode()">
                            <i class="fas fa-redo"></i>重置代码
                        </button>
                    </div>
                    <button class="btn btn-primary" onclick="submitCode()">
                        <i class="fas fa-paper-plane"></i>提交代码
                    </button>
                </div>
                <div id="editor"></div>
                <div class="result-output">
                    <div class="result-tabs">
                        <div class="tab active" onclick="switchTab('output')">输出</div>
                        <div class="tab" onclick="switchTab('testcases')">测试用例</div>
                        <div class="tab" onclick="switchTab('debug')">调试信息</div>
                    </div>
                    <div id="output-content" class="output-content">
                        <p class="info">代码运行结果将显示在这里...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // HTML转义函数
        function unescapeHTML(html) {
            return html.replace(/&lt;/g, '<')
                      .replace(/&gt;/g, '>')
                      .replace(/&amp;/g, '&')
                      .replace(/&quot;/g, '"')
                      .replace(/&#39;/g, "'");
        }

        // 初始化ACE编辑器
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.session.setMode("ace/mode/c_cpp");
        editor.setFontSize(14);
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableLiveAutocompletion: true,
            enableSnippets: true,
            showPrintMargin: false
        });

        // 设置初始代码（处理HTML转义）
        var initialCode = unescapeHTML(`{{pre_code}}`);
        editor.setValue(initialCode);
        editor.clearSelection();

        // 语言选择切换
        document.getElementById('languageSelect').addEventListener('change', function(e) {
            var mode = '';
            switch(e.target.value) {
                case 'c_cpp': mode = 'ace/mode/c_cpp'; break;
                case 'python': mode = 'ace/mode/python'; break;
                case 'java': mode = 'ace/mode/java'; break;
                case 'javascript': mode = 'ace/mode/javascript'; break;
            }
            editor.session.setMode(mode);
        });

        // 重置代码
        function resetCode() {
            if (confirm('确定要重置代码到初始状态吗？')) {
                editor.setValue(initialCode);
                editor.clearSelection();
                // 清空结果输出
                document.getElementById('output-content').innerHTML = '<p class="info">代码运行结果将显示在这里...</p>';
            }
        }

        // 切换标签页
        function switchTab(tabName) {
            document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
            event.target.classList.add('active');
            // 这里可以添加具体的标签页内容切换逻辑
        }

        // 提交代码
        function submitCode() {
            const code = editor.getValue();
            const number = "{{number}}";
            const judge_url = "/judge/" + number;

            // 显示加载状态
            const output = document.getElementById('output-content');
            output.innerHTML = '<p class="info"><i class="fas fa-spinner fa-spin"></i> 正在编译运行您的代码...</p>';

            $.ajax({
                method: 'POST',
                url: judge_url,
                dataType: 'json',
                contentType: 'application/json;charset=utf-8',
                data: JSON.stringify({
                    'code': code,
                    'input': ''
                }),
                success: function(data) {
                    showResult(data);
                },
                error: function(xhr, status, error) {
                    output.innerHTML = `<p class="error"><i class="fas fa-exclamation-triangle"></i> 请求失败: ${error}</p>`;
                }
            });
        }

        // 显示结果
        function showResult(data) {
            const output = document.getElementById('output-content');
            let html = '';

            if (data.status === 0) {
                // 成功
                html += `<p class="success"><i class="fas fa-check-circle"></i> 编译成功</p>`;
                if (data.stdout) {
                    html += `<pre class="success">输出:\n${data.stdout}</pre>`;
                }
                if (data.stderr) {
                    html += `<pre class="warning">警告:\n${data.stderr}</pre>`;
                }
            } else {
                // 错误
                html += `<p class="error"><i class="fas fa-times-circle"></i> ${data.reason || '运行出错'}</p>`;
                if (data.stderr) {
                    html += `<pre class="error">错误信息:\n${data.stderr}</pre>`;
                }
            }

            // 添加执行时间等信息
            if (data.cpu_time) {
                html += `<p class="info">执行时间: ${data.cpu_time}ms</p>`;
            }
            if (data.memory) {
                html += `<p class="info">内存使用: ${data.memory}KB</p>`;
            }

            output.innerHTML = html;
        }

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 根据难度设置对应的CSS类
            const difficulty = "{{star}}".trim();
            const badge = document.querySelector('.difficulty-badge');
            if (difficulty === '简单') {
                badge.className = 'difficulty-badge difficulty-easy';
            } else if (difficulty === '中等') {
                badge.className = 'difficulty-badge difficulty-medium';
            } else if (difficulty === '困难') {
                badge.className = 'difficulty-badge difficulty-hard';
            }
        });
    </script>
</body>

</html>